import Taro, { Component, useState, useEffect } from '@tarojs/taro';
import { View, Input, Image, Picker } from '@tarojs/components';
import Address from '../../../components/address';
import Next from '../../../static/user/icon_next.png';
import NavigationBar from '../../../components/navigationBar/index';

import {careteApply } from '../../../services/member-card'

import './index.scss';

const formList = [
  'nickname',
  'address',
  'city',
  'city_name',
  'region',
  'region_name',
  'province',
  'province_name',
  'mobile',
  'number',
  'member_type',
]
const memberType = ['未定义', 'VIP贵宾会员', '红宝石会员'];

function Apply() {

  const userInfo = Taro.getStorageSync('userInfo');

  const [ form, setForm ] = useState({
    'nickname': userInfo.nickname,
    'mobile': userInfo.mobile,
    'member_type': 1,
    ...Taro.getStorageSync('form'),
  });
  const [ list, setList ] = useState([]);
  const [ isSelected, setIsSelected ] = useState(false);

  let navigationBarHeight = Taro.getStorageSync('navigationBarHeight');


  function handleText(key, e) {
    const value = {
      ...form,
    }
    value[key] = e.target.value;
    setForm(value);
  }

  function handleSubmit() {
    console.log(form);
    try {
      formList.forEach(res => {
        if (!form[res]) {
          Taro.showToast({
            title: '请填写信息',
            icon: 'none'
          })
            throw (new Error('The message'));
        }
      })
    }  catch (error) {
        return false;
    }
    Taro.setStorageSync('form', (form))
    careteApply({ ...form }).then(ele => {
      Taro.redirectTo({
        url: '/subPackageWork/pages/apply-success/index?type=1'
      })
    })
  }

  function closeItem (data) {
    console.log(data)
    setForm({
      ...form,
      ...data
    });
    setIsSelected(false);
  }

  return (
    <View className='apply' style={`margin-top: ${navigationBarHeight}`}>
      <NavigationBar text="申领会员卡" />
      <View className="box">
        <View className="from-item">
          <View className="label">代理名</View>
          <View className="space"></View>
          <Input onInput={(e) => handleText('nickname', e)} placeholder-class="phcolor" value={form.nickname} placeholder="请输入代理名的姓名" />
          <Image src={Next} className='next' />
        </View>
        <View className="from-item">
          <View className="label">所在地区</View>
          <View className="space"></View>
          <View className="tip" onClick={() => setIsSelected(true)}>
            {
              form.province_name ? `${form.province_name}${form.city_name || ''}${form.region_name || ''}` : '请选择所在地区'
            }
          </View>
          <Image src={Next} className='next' />
        </View>
        <View className="from-item">
          <View className="label">联系电话</View>
          <View className="space"></View>
          <Input onInput={(e) => handleText('mobile', e)} placeholder-class="phcolor" type="number" value={form.mobile} placeholder="请输入联系电话" />
          <Image src={Next} className='next' />
        </View>
        <View className="from-item">
          <View className="label">收卡地址</View>
          <View className="space"></View>
          <Input onInput={(e) => handleText('address', e)} placeholder-class="phcolor" value={form.address} placeholder="请填写收卡地址" />
          <Image src={Next} className='next' />
        </View>
      </View>
      <View className="box">
        <View className="from-item">
          <View className="label">申领卡数量</View>
          <View className="space"></View>
          <Input onInput={(e) => handleText('number', e)} placeholder-class="phcolor" value={form.number} type="number" placeholder="输入申请卡数量" />
          <Image src={Next} className='next' />
        </View>
        <View className="from-item">
          <View className="label">卡劵类型</View>
          <View className="space"></View>
          <Input placeholder-class="phcolor" value={memberType[form.member_type]} disabled placeholder="VIP贵宾会员卡" />
          <Image src={Next} className='next' />
        </View>
      </View>
      <View className="apply-btn" onClick={handleSubmit}>提交申领卡</View>
      <Address isSelected={isSelected} defaultvalue={list} closeItem={closeItem} />
    </View>
  )
}

Apply.config = {
  navigationBarTitleText: '申领卡',
}

export default Apply;
